<template>
	<div class="btn-content" ref="warp">
		<div class="btn_item">
			<span @click="poster">保存图片发朋友圈</span>
		</div>
		<div class="btn_item">
			<span @click="seeData">看看谁和我匹配</span>
		</div>
	</div>
	
</template>

<script>
	import html2canvas from "html2canvas";
	export default {
		data(){
			return {
				imgUrl:""
			}
		},
		mounted() {
			// this.poster()
		},
		methods:{
			seeData(){
				// alert('nihao')
				this.$router.push({
					path: "./fourTest",
					name: "fourTest",
					query: {
						imgUrl:this.$route.query.imgUrl
					},
				})
			},
			poster(){
				html2canvas(this.$refs.warp).then(function(canvas){
					// canvas.toDataUrl将canvas转为base64位
					console.log(canvas)
					console.log(canvas.toDataURL("image/jpg",1))
					document.body.appendChild(canvas)
				})
			}
		}
	}
</script>

<style lang="scss">
	@function px2vw($px) {
		@return $px * 100/750 * 1vw;
	}
	.btn-content .btn_item{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		font-size: 0.4rem;
		margin-top: px2vw(15);
		>span{
			// background-color: #fff;
			display: block;
			width: px2vw(458);
			height: px2vw(84);
			text-align: center;
			line-height: px2vw(84);;
			background: url(../../../images/btn_icon_06.png) center no-repeat;
			background-size: cover;
			margin-bottom: px2vw(20);
			color: #bd0199;
		}
	}
</style>
